<template>
  <view class="max_box">
    <view v-for="item in list" :key="item.path" class="icon_box" :style="`opacity:${item.flag ? '1' : '0.3'}`">  
      <navigator :url="item.path" open-type="navigate" hover-class="navigator-hover">
        <view :style="`opacity:${true ? '1' : '0.5'}`">
          <image :src="item.url" :style="`width: 100rpx; height: 100rpx;`"></image>
        </view>
        <text class="text">{{ item.text }}</text>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useUserComfirmInfo } from '@/stores/index'
const useUserComfirmProps = useUserComfirmInfo()
const { list } = storeToRefs(useUserComfirmProps)
</script>

<style scoped lang="scss">
.max_box {
  padding-top: 10%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 33%);
  grid-row-gap: 2rem;
  .icon_box {
    text-align: center;
    box-sizing: border-box;
  }
  .text {
    display: block;
    margin: 1rem 0;
    font-size: 1.5rem;
  }
}
</style>
